<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="showDialog"
    :title="title"
    :destroy-on-close="true"
    @close="onCloseDialog"
    width="50%"
  >
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="基本信息" name="essentialInfo">
        <el-form :model="formTerminalGateData" ref="formTerminalGateData" label-width="100px">
          <el-form-item label="设备名称">
            <el-input
              v-model="formTerminalGateData.deviceName"
              placeholder="设备名称"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select
              v-model="formTerminalGateData.deviceTypeId"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in deviceTypeList"
                :key="item.id"
                :label="item.deviceTypeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="自动更新">
            <el-switch v-model="isUpgrade" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>

          <el-form-item label="是否启用">
            <el-switch v-model="isStatus" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="deviceGateInfoUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="其他设置" name="otherSettings">
        <el-form
          :model="formTerminalData"
          ref="formTerminalData"
          :inline="true"
          label-width="100px"
        >
          <!-- <el-form-item label="扣费方式">
                <el-select v-model="formTerminalData.sysDeviceGateOtherSetVO.deductionMode" clearable placeholder="请选择"
                          size="small">
                  <el-option
                    v-for="dict in formatDictMap('SYS_PAY_SORT')"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"/>
                </el-select>
              </el-form-item>
              <el-form-item label="刷卡方式">
                <el-select v-model="formTerminalData.sysDeviceGateOtherSetVO.swipeMode" clearable placeholder="请选择"
                          size="small">
                  <el-option
                    v-for="dict in formatDictMap('SWIPE_MODE')"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"/>
                </el-select>
              </el-form-item> -->

          <el-form-item label="进出类型">
            <el-select
              v-model="formTerminalData.sysDeviceGateOtherSetVO.accessType"
              clearable
              placeholder="请选择"
              style="width: 240px"
            >
              <el-option
                v-for="dict in formatDictMap('GATE_ACCESS_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="滴卡扣币数量">
            <el-input
              v-model="formTerminalData.sysDeviceGateOtherSetVO.coinDeductionCount"
              placeholder="滴卡扣币数量"
              clearable
              size="small"
            />
          </el-form-item>

          <el-divider content-position="left">闸机支持刷闸方式</el-divider>
          <div
            v-for="(item, index) in formTerminalData.sysDeviceGateOtherSetVO.checkBrushSetList"
            :key="index"
          >
            <el-row>
              <el-col :span="4">
                <el-input
                  v-model="item.sort"
                  placeholder="顺序"
                  clearable
                  size="small"
                  :disabled="true"
                >
                  <template #prepend>顺序</template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-select v-model="item.checkType" clearable placeholder="请选择" size="small">
                  <el-option
                    v-for="dict in formatDictMap('GATE_CHECK_BRUSH_TYPE')"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-col>
              <el-col :span="2">
                <el-switch v-model="item.isCheck" active-color="#13ce66" inactive-color="#ff4949" />
              </el-col>
            </el-row>
          </div>

          <el-divider content-position="left">闸机支持刷票方式</el-divider>
          <div
            v-for="(item, index) in formTerminalData.sysDeviceGateOtherSetVO.checkTicketSetList"
            :key="index"
          >
            <el-row>
              <el-col :span="4">
                <el-input
                  v-model="item.sort"
                  placeholder="顺序"
                  clearable
                  size="small"
                  :disabled="true"
                >
                  <template #prepend>顺序</template>
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-select v-model="item.checkType" clearable placeholder="请选择" size="small">
                  <el-option
                    v-for="dict in formatDictMap('GATE_CHECK_TICKET_TYPE')"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-col>
              <el-col :span="2">
                <el-switch v-model="item.isCheck" active-color="#13ce66" inactive-color="#ff4949" />
              </el-col>
            </el-row>
          </div>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="configureUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import { deviceAction } from '@/api/device/device.js';
  import { deviceTypeList } from '@/api/device/type.js';
  import { ElMessage } from 'element-plus';
  import { getDictOptions } from '@/utils/dict';

  export default {
    name: 'DialogGateTerminal',
    dicts: [
      'SWIPE_MODE',
      'SYS_PAY_SORT',
      'GATE_ACCESS_TYPE',
      'GATE_CHECK_BRUSH_TYPE',
      'GATE_CHECK_TICKET_TYPE',
    ],
    props: {
      dialog: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '终端设置',
      },
      deviceId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        payModecheckboxGroup: [],
        activeName: 'essentialInfo',
        // showDialog: false,
        isUpgrade: true,
        isStatus: true,
        formTerminalGateData: {
          sysDeviceGateOtherSetVO: {
            swipeMode: 'ALL_MODE',
            deductionMode: 'COIN',
            coinDeductionCount: 0,
            accessType: 1,
          },
        },
        formTerminalData: {
          sysDeviceGateOtherSetVO: {
            swipeMode: 'ALL_MODE',
            deductionMode: 'COIN',
            coinDeductionCount: 0,
            accessType: 1,
          },
        },

        deviceTypeList: [],
      };
    },
    computed: {
      showDialog() {
        return this.dialog;
      },
    },
    watch: {},
    created() {
      this.getDeviceGateDetails();
      //设备类型列表
      deviceTypeList({}).then((res) => {
        this.deviceTypeList = res;
      });
    },
    methods: {
      // 格式化字典
      formatDictMap(dictEnum) {
        return getDictOptions(dictEnum);
      },
      // 表单重置
      reset() {},
      //终端设置
      getDeviceGateDetails() {
        deviceAction('GATE', 'getDeviceGateDetails', this.deviceId).then((response) => {
          this.formTerminalData = response;
          this.formTerminalGateData = response;
          this.payModecheckboxGroup = response.payModecheckboxGroup;
          if (this.formTerminalGateData.isStatus == 1) {
            this.isStatus = false;
          }
          if (this.formTerminalGateData.isUpgrade == 0) {
            this.isUpgrade = false;
          }
        });
      },
      //设备信息修改
      deviceGateInfoUpdate() {
        this.formTerminalGateData.isStatus = this.isStatus == true ? 0 : 1;
        this.formTerminalGateData.isUpgrade = this.isUpgrade == true ? 1 : 0;
        deviceAction('DEVICE', 'updateDevice', this.formTerminalGateData).then((response) => {
          if (response) {
            ElMessage({
              message: '操作成功！',
              type: 'success',
            });
            this.$emit('submit');
          } else {
            ElMessage({
              message: response.msg,
              type: 'error',
            });
          }
        });
      },
      //参数修改
      configureUpdate() {
        deviceAction('GATE', 'getDeviceGateSetOtherInfoUpdate', this.formTerminalData).then(
          (response) => {
            if (response) {
              ElMessage({
                message: '操作成功！',
                type: 'success',
              });
              this.$emit('submit');
            } else {
              ElMessage({
                message: response.msg,
                type: 'error',
              });
            }
          },
        );
      },
      onCloseDialog() {
        this.$emit('close');
      },
    },
  };
</script>

<style scoped></style>
